<!DOCTYPE html>
<html lang="en" ng-app = "controllers">

  <head>	
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles/art page style.css">
    <link href="dist/css/bootstrap.css" rel="stylesheet" />
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" />
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href="dist/css/bootstrap-theme.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="dist/css/bootstrap-responsive.css" rel="stylesheet" />
	<script src="js/angular.js"></script>
	<script src="js/angular-resource.js"></script>
	<script src="js/angular.min.js"></script>
	<script src = "js/angular-cookies.js"></script>
	<script src="js/controllers.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/style.css">
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="js/script.js"></script>
    <script src="js/controllers.js"></script>
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="dist/js/bootstrap.js"></script>

    
    <title>Quirkl- Art Title</title>
	
	</head>
  
	<body ng-controller = "UserCtrl" ng-init="curUser=$scope.curUser" ng-init="loggedIn=$auth.isLogged">
		<div class = "container-fluid full-width">
		<div class = "row-fluid">
		  <nav class = "navbar navbar-default" role = "navigation">
			<div class = "navbar-header">
			  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			  </button>
			  <div class = "span1" ng-switch="loggedIn">
				  <a ng-switch-when="true" class = "navbar-brand" href="index.html?;;user={{curUser}}"><img src = "img/logors.png" alt = "idk"/></a>
				  <a ng-switch-when="false" class = "navbar-brand" href="index.html"><img src = "img/logors.png" alt = "idk"/></a>
			  </div>
			</div>
			<div class = "collapse navbar-collapse navbar-ex1-collapse" ng-switch="loggedIn">
			<div ng-switch-when="true">
			  <ul class = "nav navbar-nav" >
			  	<li><a href="index.html?;;user={{curUser}}">
					<h4>Home</h4></a></li>
				<li><a href="#"><h4>About</h4></a></li>
			  </ul>    
            </div>
			<div ng-switch-when="false">
			  <ul class = "nav navbar-nav" >
			  	<li><a href="index.html">
					<h4>Home</h4></a></li>
				<li><a href="#"><h4>About</h4></a></li>
			  </ul>    
            </div>
				
			  <form class="navbar-form navbar-left" role = "search">
			  </form>  
			  <div ng-switch on = "!!auth.isLogged">
              <div ng-switch-when = 'true'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                	<li><h4 style="padding: 10px; font-color: #000777">"Hi, {{auth.user}}!"</h4></li>
                  <li><a href="#"><img src = "img/mail-icon.png" alt = "who knows"></a></li>
                  <li class = "dropdown">
                    <a href="#" class = "dropdown-toggle" data-toggle = "dropdown"><img src = "img/user.png" alt = "who knows"><b class = "caret"></b></a>
                    <ul class = "dropdown-menu">
                      <li><a href="profile.html?artistID={{curUser}};;user={{curUser}}">My Profile</a></li>
                      <li><a href="#">Settings</a></li>
                      <li><a href="#" ng-click = "logout()">Sign Out</a></li>
                    </ul>
                  </li>
                </ul>
              </div>
              <div ng-switch-when = 'false'>
                <ul class = "nav navbar-nav navbar-right pull-right">
                  <li><a data-toggle = "modal" href = "#signUp"><h4>Sign Up</h4></a></li>
                  <li><a data-toggle = "modal" href = "#login"><h4>Log In</h4></a></li>
              </div>  
			</div> 
		  </nav>
		</div>
		<div class = "row-fluid">
			<div class="span2">
				<div class="menu">
					<nav>  
					<ul class = "nav nav-pills nav-stacked">
						<li ng-click="displayChange('Film')"><a href="#">Film</a></li>
						<li ng-click="displayChange('Music')"><a href="#">Music</a></li>
						<li ng-click="displayChange('Performance')"><a href="#">Performance</a></li>
						<li ng-click="displayChange('Series')"><a href="#">Series</a></li>
						<li>
						  <div class="panel-group" id="accordian">
							<div class = "panel panel-default">
								<div class = "panel-heading">
									<a class = "accordian-toggle" data-toggle="collapse" href="index.html" ng-click="displayChange('Visual Art')">Visual Art</a>
								</div>
								<div id="collapseOne" class="panel-collapse collapse">
								<div class="panel-body" style="padding-left: 0px; padding-top: 0px">
									<ul class = "list-unstyled">
										<li ng-click="displayChange('Paintings')"><a href="#">Paintings</a></li>
										<li ng-click="displayChange('Photography')"><a href="#">Photography</a></li>
										<li ng-click="displayChange('Sculptures')"><a href="#">Sculptures</a></li>
									</ul>  
								</div>
							  </div> 
							</div>
						   </div>
						</li>
					</ul>  
					</nav>
				</div>
			</div>
		
	   
		   <!Art>
			<div class="Art"  ng-controller="ArtPageCtrl">
				<div class="AdBlock1">
					<h3> Ad Block 1</h3>
				</div>
				<div class="ArtInfo">
					<h3> Title: 
						<span ng-init="artNum=$scope.artNum">
							{{artwork[artNum].title}}
						</span>
					</h3>
					<h4> Description:</h4>
					<p>
						{{artwork[artNum].description}}
					</p>	
				</div>
				<div class="Image">		
					<div class="ImgContainer" ng-switch="artType">
						<img ng-switch-default src="{{artwork[artNum].thumbnail}}">
						<video class="film" ng-switch-when="1" width="480" height="270" controls>
						  <source src="{{film[artNum].location}}" type="{{film[artNum].videotype}}">
							Your browser does not support the video tag.
						</video>
						<video class="performances" ng-switch-when="2" width="480" height="270" controls>
						  <source src="{{performance[artNum].location}}" type="{{performance[artNum].videotype}}">
							Your browser does not support the video tag.
						</video>
						<video class="series" ng-switch-when="3" width="480" height="270" controls>
						  <source src="{{series[artNum].location}}" type="{{series[artNum].videotype}}">
							Your browser does not support the video tag.
						</video>
						<span class="music" ng-switch-when="4">
							<img src="{{music[artNum].thumbnail}}">
							<audio  controls>	  
							  <source src="{{music[artNum].location}}" type="{{music[artNum].musictype}}">
								Your browser does not support the audio element.
							</audio>
						</span>
					</div> 
				</div>
				<div class="Buttons" ng-controller="UserCtrl" ng-switch= "loggedIn">
					<div ng-switch-when='true'>
						Rating: {{artRating}}
						<button type="button" ng-click="artRating = artRating + 1">Like It
							<img src="img/heart.jpg" alt="art" width="20" height="20">		
						</button>
						<button type="button">Add to Favorites</button>
					</div>
					<div ng-switch-when='false'>
						Rating: {{artRating}}
					</div>
				</div>
				<div ng-switch="loggedIn" ng-init="artistNum=$scope.artistNum">
					<a class="ArtistInfo" ng-switch-when="true" href="profile.html?artistID={{artistNum}};;user={{curUser}}">
						<h3> 
							Artist: 
							<span> 
								{{artists[artistNum].username}}
							</span>
						</h3>
						<p>
							{{artists[artistNum].bio}}
						</p>
						<img src="{{artists[artistNum].thumbnail}}">
					</a>
					<a class="ArtistInfo" ng-switch-when="false" href="profile.html?artistID={{artistNum}}">
						<h3> 
							Artist: 
							<span> 
								{{artists[artistNum].username}}
							</span>
						</h3>
						<p>
							{{artists[artistNum].bio}}
						</p>
						<img src="{{artists[artistNum].thumbnail}}">
					</a>
				</div>
				<div class="AdBlock2">
					<h1> Ad Block 2</h1>
				</div>
				<div class="Comments">
					<h4>Comments</h4>
					<div class="CommentButtons">
						<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Most Recent</button>
						<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Most Popular</button>
						<button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Most Active</button>
					</div>
					</br>
					<div class="Comment" ng-init= "length=$scope.commentListLength" ng-init= "commentList=$scope.commentList" ng-repeat="comment in commentList">
						<h4>{{comments[comment].profileName}}</h4>
						<h4 style="float:right; top:-40px; position:relative"> {{comments[comment].date}}</h4>
						<p> {{comments[comment].text}}</p>
					</div>
					</br>
					<div class="AddComment">
						<form name="input" action="html_form_action.asp" method="get">
							<input type="text" name="user">
							<input type="submit" value="Post Comment">
						</form>
					</div>
				</div>
				<div class="Awards">
					<h4>Awards</h4>
					<h5>Empty</h5>
				</div>
			</div>
		</div>
		</div>
		 <div>  
    <div class = "modal fade" id = "signUp" tabindex = "-1" role = "dialog" aria-labelledby="signUpLabel" aria-hidden="true">
      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="signUplabel">Sign Up</h4>
          </div>
          <div class = "modal-body">
             <form>
                <label for="username">Username:</label>
                <input type = "text"  name = "username" ng-model = "username" required><br/>
                <label for = "password">Password:</label>
              </form>
          </div>
          <div class = "modal-footer">
            <button type = "button" class = "btn btn-success" ng-click = "submit()" data-dismiss = "modal">Submit</button>
            <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
      </div>
    </div> 
    <div class = "modal fade" id = "login" tabindex = "-1" role = "dialog" aria-labelledby="loginLabel" aria-hidden="true">

      <div class = "modal-dialog">
        <div class = "modal-content">
          <div class = "modal-header">
            <h4 class = "modal-title" id="loginlabel">Log In</h4>
          </div>
          <div class = "modal-body">
             <form>
                <label for = "username">Username: {{auth.user}}</label>
                <input type = "text" name = "username"  required><br/>
                <label for = "password">Password:</label>
                <input type = "text" name = "password" required><br/>
             </form>
          </div>
          <div class = "modal-footer">
            <button type = "button" class = "btn btn-success" type = "submit" ng-click="logon(username,password)" data-dismiss = "modal">Submit</button>
            <button type = "button" class = "btn btn-danger" data-dismiss = "modal">Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>  
	</body>
</html>